前言

在之前的文章中，我們介紹了這次專案的 Site Map規劃，今天，我們將使用 Figma 繪製 wireframe設計圖，並簡單的說一下開發過程中的設計應用。

前端工程師很容易會接觸到設計的部分，在比較小的公司或是大公司裡面的小部門(?)通常不見得會有UIUX設計師。比較不懂的或是其實就是想省錢不想多請人的老闆，有很大的機率會請前端工程師兼職設計。

我就是在這種情況下學習Figma的使用，甚至還在公司內部開立過講座和課程教同仁使用。但我其實也沒有很會用，就是會用到的部分會用而已。

但我覺得會一點 Figma 之類的設計軟體也很不錯，才能把自己想要的網站或是APP從你的腦子中具象化出來和別人討論。畢竟，我學習寫程式最大的初衷就是想看看能不能創業。

Figma

Figma 是一個強大的設計工具，它提供了即時協作、設計規格導出和版本控制等功能，讓設計師與工程師在開發的時候可以更加順利。

我個人覺得是個還不錯的設計軟體，也算是目前比較主流的軟體。上手也不難，基本上如果你會使用或是以前有在 power point 裡面試著用各種正方形，三角形圓形畫圖的話，那其實 Figma概念就很像了。

我覺得Figma最強大也最吸引我的功能就是 prototype(原型) 的功能，他可以做出像真的網頁一樣可以在展示的時候點擊某個部分就跳轉到頁面。甚至效果和動畫都會有，就像真的網頁做出來了一樣。只是要做到那樣子會很花時間而已...。

為什麼要畫 Wireframe？

Wireframe 是介於設計和開發之間的一個重要橋樑，它是一種低保真度的設計草圖，主要用來展示頁面的基本佈局和功能結構。

• 重點放在功能而非美觀：Wireframe 幫助我們專注於應用的基本操作流程，確保核心功能能夠正常運作。
• 快速迭代：通過簡單的線框設計，我們可以快速進行頁面調整與功能優化，減少後期開發中的重工。
• 減少開發風險：提前解決頁面流程的問題，確保在進行視覺設計和開發時，功能已經得到驗證。
• 用戶體驗的優化：Wireframe 讓我們可以從全局角度檢視使用者流程，找出操作不直觀或不順暢的地方，並進行優化。

畢竟Tom 本人也不是設計系或學美術的，對於APP設計圖沒辦法做到很漂亮。畢竟那也要花很多時間。不過一人接案的話，你其實就是PM，也需要和客戶溝通，這時候 Wireframe就很重要了。不僅是自己後面開發的依據，也是你拿來和客戶討論溝通確認流程設計是他想要的一個很好的工具。

APP Wireframe

接下來是具體的 Wireframe 設計圖，展示應用中的各個主要頁面。我們將看到從 Home Screen 到設定頁面的每個環節是如何設計的。

1. Home Screen & Dashboard
   在 Home Screen 上，用戶可以選擇登入或註冊。登入後，進入 Dashboard，這是應用的主頁面，用戶可以在此查看和管理報告。

未登入	已登入 Dashboard

2. Create New Report
   建立新的報告，預設流程是先開啟後先上傳照片後 OCR 辨識完成後帶入資料，接著使用者接著填入資料。最後報告存在列表之中。可預覽 pdf或是匯出。

上傳證件	開啟相機示意圖	OCR辨識後帶入資料

填寫其他資料	完成後	預覽 pdf

3. 報告列表與報告詳情
   在 Reports 頁面中，使用者可以查看過往的事故報告，並進入報告詳情頁面進行編輯、查看完整表單或匯出 PDF。

報告列表	編輯畫面	預覽報告

4. Settings & Help

• Settings 頁面提供使用者管理個人資料，可以設定姓名信箱變更密碼之類的。
• Help & Support 頁面則是會放一些簡單的說明與支援。

結論

Figma Wireframe 可以讓你的設計更加明確，在製作的時候也可以更加知道自己的目標與可不可行。也是一個和客戶討論的好工具。

不過如果角色是開發者，我還是覺得不要花太多時間在畫圖上面，求快和達到溝通的目的就好了。

我有一陣子工作都在畫 Figma的設計圖，我後來覺得我還是比較喜歡寫程式，每天畫這些圖又改來改去真的會讓我覺得很煩躁。但我還是很推薦前端工程可以學一下Figma，會是一個很好的工具。

退一萬步來說，除了和客戶老闆討論需求。會 Figma也可以更好清楚指派任務給同事。可以把要修改的需求除了文字以外用圖更清楚明白。

下一步，我們將進一步進行技術開發選用的分析與說明，再來慢慢實現這些設計中的核心功能。

工商時間

如果喜歡聽Podcast或是可以聽聽看說的會不會比較清楚，未來Podcast預計更新，可以用聽的看看不一樣的內容。畢盡文章和說明會不一樣，應該會更有故事性？像閒聊之類的。

可以透過以下平台收聽： Apple podcast Spotify KKBOX
Linking Tree